import React from 'react';
import {
  Platform,
  Text,
  TouchableOpacity,
  Image,
  View
} from 'react-native';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Icon from 'react-native-vector-icons/Ionicons';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import styles from './css/Home';
import { BaseComponent, NavBar, TableList,PlaceHolderView } from '../wedgets'; 
import Fetch from '../lib/FetchUtil/Fetch';

type Props = {};
export default class NextPage extends BaseComponent<Props> {
  static navigationOptions = ({ navigation }) => ({
    title:'列表'
  })
  constructor(props) {
    super(props);
    this.state = {
      tabShow: false
    }
  }
  componentDidMount() {

  }

  

  render() {
    const {navigation} = this.props ;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ScrollableTabView
          tabBarUnderlineStyle={styles.underLine}
          tabBarActiveTextColor={"#404760"}
          tabBarInactiveTextColor={"#404760"}
          renderTabBar={() => <DefaultTabBar />}
          style={styles.scrollContent}>
          <RiskAssessCenter tabLabel={'列表'} navigation={navigation} />
          <Find tabLabel={'发现'} navigation={navigation} />
          <InfomationCenter tabLabel={'其他'} navigation={navigation} />
        </ScrollableTabView>
      </View>
    );
  }
}


class RiskAssessCenter extends BaseComponent {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.fetchData = this.fetchData.bind(this);
  }
  //list请求数据实现入口
  fetchData = async(page, startFetch, abortFetch) => {
    //模仿数据下拉加载
    new Fetch({
      url:'http://www.weather.com.cn/data/city3jdata/china.html',
      method:'get',
    }).dofetch().then((res)=>{
      let pros = [];
      for(let i in res){
        pros.push({[i]:res[i]});
      }
      console.log('=====>',pros);
      startFetch(pros, 100)
    }).catch((err)=>{
      abortFetch()
    })
  }



  renderRow=({ item, index })=>{
    // console.log('======000',item)
    return<TouchableOpacity
    onPress={()=>{
      //由于本Component继承自BaseComponent所以可以直接调用BaseComponent的方法
      this.goToComponent('Weathers',{
        //这里可以传递参数,这里我们把省份编码传递到下一个界面
        area_code:Object.keys(item)[0],
        title:item[Object.keys(item)[0]]
      });
    }}
     style={{height:100,borderBottomColor:'#F2F2F2',borderBottomWidth:PX_LINE,justifyContent:'center'}}>
      <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',width:SCREEN_W,paddingHorizontal:13}}>
        <Text style={{fontSize:14,color:'#999'}}>{Object.keys(item)[0]}</Text>
        <Text style={{fontSize:18,color:'#66B8F5',marginLeft:13}}>{item[Object.keys(item)[0]]} ></Text>
      </View>
    </TouchableOpacity>
  }
  render(){
    return(
      <View style={{flex:1}}>
        <TableList
          ref={list => this.list = list}
          style={{ backgroundColor: 'white' }}
          onFetch={this.fetchData}
          renderItem={this.renderRow}
          keyExtractor={item => item.id}
          initialNumToRender={10}
          pagination={false}
          paginationType={'value'}
          PaginationFetchingView={() => {
            return [
              <PlaceHolderView type={'video'} key={'top'} />,
              <PlaceHolderView type={'video'} key={'center'} />,
              <PlaceHolderView type={'video'} key={'bottom'} />
            ];
          }}
        />
      </View>
    )
  }
}

class Find extends BaseComponent {
  render(){
    return(
      <View style={{flex:1}}>
        <Text>发现</Text>
      </View>
    )
  }
}

class InfomationCenter extends BaseComponent {
  render(){
    return(
      <View style={{flex:1}}>
        <Text>情报中心</Text>
      </View>
    )
  }
}


